<template>
   <div>
      <div class="cartcontrol">
         <!-- 减得按钮 -->
         <transition name="move">
            <div
               class="iconfont icon-remove_circle_outline"
               v-show="food.count"
               @click="updateCount(false, food.id)"
            ></div>
         </transition>
         <!-- 所购买得数量，假设购买得数量 属性名为:count,把count加在点餐得食品里 -->
         <div class="cart-count" v-show="food.count">{{ food.count }}</div>
         <!-- 加得按钮 -->
         <div
            class="iconfont icon-add_circle"
            @click="updateCount(true, food.id)"
         ></div>
      </div>
   </div>
</template>
<script>
//vuex
import { mapState, mapMutations } from "vuex";
//mui
import { MessageBox } from 'mint-ui';

export default {
   props: ["food"],
   computed: {
      ...mapState('profile', ['userInfo']),
   },
   methods: {
      ...mapMutations("mstite", ["UPDATE_GOODS_COUNT"]),
      /**
       * 更新商品数量
       * @param {Boolean} type 指定操作类型 加法/减法
       * @param {Number} foodId 商品ID值
       */
      updateCount(type, foodId) {
         if (!this.userInfo.username) return MessageBox.confirm('请先登录后操作').then(() => {
            this.$router.replace('/login')
         }, () => {})
         // 执行更新商品数量的动作
         this.UPDATE_GOODS_COUNT({ type, foodId });
      },
   },
};
</script>
<style lang="stylus" scoped>
@import '../../common/stylus/mixins.styl';

.cartcontrol {
   font-size: 0;

   .cart-decrease {
      display: inline-block;
      padding: 6px;
      line-height: 24px;
      font-size: 24px;
      color: rgb(0, 160, 220);
   }

   .icon-remove_circle_outline {
      display: inline-block;
      padding: 6px;
      line-height: 24px;
      font-size: 24px;
      color: #02a774;
      cursor pointer

      &.move-enter-active, &.move-leave-active {
         transition: all 2s;
      }

      &.move-enter, &.move-leave-to {
         opacity: 0;
         transform: translateX(15px) rotate(180deg);
      }
   }

   .cart-count {
      display: inline-block;
      vertical-align: top;
      width: 12px;
      padding-top: 6px;
      line-height: 24px;
      text-align: center;
      font-size: 10px;
      color: rgb(147, 153, 159);
   }

   .icon-add_circle {
      display: inline-block;
      padding: 6px;
      line-height: 24px;
      font-size: 24px;
      color: #02a774;
      cursor pointer
   }
}
</style>